<template>
	<view class="back-view" @touchmove.stop.prevent="moveHandle">
		<view class="view-background"></view>
		<view class="white-view-back">
			<view class="top-back">
				<view class="top-name">查看模板库</view>
				<view class="close-back" @click="closeBtnAction">
					<image class="close-img" src="../../../../static/close.png"></image>
				</view>
			</view>
			<view class="top-line"></view>
			<view class="top-back">
				<view class="top-right top-right-left" :class="screenSelect?'top-right-select':''" @click="selectAction">
					<view :class="screenSelect?'top-contnet top-content-select': 'top-contnet'">筛选</view>
					<image v-if="!screenSelect" class="top-icon" src="../../../../static/select.png"></image>
					<image v-if="screenSelect" class="top-icon" src="../../../../static/select_select.png"></image>
				</view>
			</view>
			
			<view class="uni-container">
				<scroll-view class="left-back" scroll-y="true">
					<view class="left-item">
						<text>模板分类</text>
					</view>
					<view v-for="(item,index) in roleArr" :key="index">
						<view :class="btnselect == index && rowselect ==0?'left-item left-item-select':'left-item'">
							<image :class="item.show?'left-item-image':'left-item-image left-item-image-trans' "
								@click="clickShowAction(index)" src="../../../../static/arrow_down.png"></image>
							<view class="left-item-name" @click="clickShowAction(index)">{{item.name}}</view>

						</view>
						<view v-if="item.show" v-for="(value1,ind) in item.children" :key="ind">
							<view
								:class="btnselect == index && rowselect == ind+1?'left-item left-item-select':'left-item'">
								<image class="left-item-image left-item-image1"></image>
								<view class="left-item-name" @click="clickLest1Action(index,ind)">{{value1.name}}</view>

							</view>
						</view>
					</view>
				</scroll-view>
				<scroll-view class="right-back" scroll-x="true">
					<uni-table ref="mytable" :loading="loading" stripe emptyText=" ">
						<uni-tr>
							<uni-th align="left" width="200">文件名称</uni-th>
							<uni-th align="left">模板分类</uni-th>
							<uni-th align="left">上传者</uni-th>
							<uni-th align="left" width="200">上传时间</uni-th>
							<uni-th align="left" width="100">操作</uni-th>
						</uni-tr>
						<uni-tr v-for="(item, index) in tableData" :key="index">
							<uni-td align="left">
								<!-- 							<image class="header-img" mode="aspectFill" :src="item.fileUrl"></image>
 -->
								<!-- 图片 -->
								<image src="../../../../static/phone/jpg.png" class="header-img"
									v-if="item.fileSuffix =='jpg' || item.fileSuffix=='png'|| item.fileSuffix=='jpeg'|| item.fileSuffix=='webp'">
								</image>
								<!-- 文档 -->
								<image src="../../../../static/phone/case-detail-word.png" class="header-img"
									v-else-if="item.fileSuffix =='docx' || item.fileSuffix=='doc'">
								</image>
								<!-- 表格 -->
								<image src="../../../../static/phone/case-detail-excel.png" class="header-img"
									v-else-if="item.fileSuffix =='xlsx' || item.fileSuffix=='xls'">
								</image>

								<!-- ppt -->
								<image src="../../../../static/phone/case-detail-ppt.png" class="header-img"
									v-else-if="item.fileSuffix =='pptx' || item.fileSuffix=='ppt'">
								</image>
								<!-- pdf -->
								<image src="../../../../static/phone/case-detail-pdf.png" class="header-img"
									v-else-if="item.fileSuffix =='pdf' || item.fileSuffix =='pdfx'">
								</image>

								<image v-else src="../../../../static/phone/case-detail-pdf.png" class="header-img">
								</image>
								<text class="celltext">{{ item.name }}</text>

							</uni-td>
							<uni-td align="left">{{ item.classify.name }}</uni-td>
							<uni-td align="left">{{ item.createAt }}</uni-td>
							<uni-td align="left">{{ item.createTime }}</uni-td>
							<uni-td align="left">
								<view style="display: flex;">
									<view class="item-blue-text" @click="delAction(item)">删除</view>
									<view style="margin-left: 12px;" class="item-blue-text"
										@click="downloadAction(item)">下载
									</view>
								</view>
							</uni-td>
						</uni-tr>
					</uni-table>

					<view class="search-back" v-if="tableData.length == 0">
						<image class="search-image" :src="pc_search_nodata"></image>
						<view class="search-noresult">没有查询到结果</view>
					</view>
				</scroll-view>
			</view>
		</view>
		
		<popSelect v-model="showScreen" :x="screenx" :y="screeny" placement="top-end" dynamic>
			<view v-if="showScreen" class="screen-back">
				<uni-forms ref="baseForm" :modelValue="screenFormData" style="width:200px;">
					<uni-forms-item>
						<uni-easyinput v-model="screenFormData.name" placeholder="文件名称" />
					</uni-forms-item>
					<uni-forms-item>
						<selectxy :zindex=399 ref="selectxy" :value="multipleArr" placeholder="文件类型"
							:options="rangeList" @change="multipleChange">
						</selectxy>
					</uni-forms-item>
					<uni-forms-item>
						<uni-easyinput v-model="screenFormData.createAt" placeholder="上传者" />
					</uni-forms-item>

					<uni-forms-item>
						<view style="display: flex;justify-content: space-between;">
							<view class="date-select-back" @click="openDatetimePicker(0)">
								<image class="dateimage" src="../../../../static/pc_date.png"></image>
								<view v-if="screenFormData.updatestart" class="date-select-time">
									{{screenFormData.updatestart}}
								</view>
								<view v-else class="date-select-plac">上传时间起</view>
							</view>
							<view class="date-select-back" @click="openDatetimePicker(1)">
								<image class="dateimage" src="../../../../static/pc_date.png"></image>
								<view v-if="screenFormData.updateend" class="date-select-time">
									{{screenFormData.updateend}}
								</view>
								<view v-else class="date-select-plac">上传时间止</view>
							</view>
						</view>
					</uni-forms-item>
					<view class="select-bottom">
						<view class="select-bottom-left" @click="selectReset">重置</view>
						<view class="select-bottom-right" @click="selectSureAction">筛选</view>
					</view>
				</uni-forms>
			</view>
			<dateTimeSelect :type='date' ref="myPicker" @submit="handleSubmit" :start-year="2022" :end-year="2030" />
		</popSelect>
	</view>
</template>

<script>
	import popSelect from "@/components/popSelect/popSelect.vue"
	import requsetFileId from '@/pages/utils/upload.js'
	import selectxy from "@/components/select-cy/select-cy.vue"
	export default {
		components: {
			popSelect,
			selectxy,
		},
		data() {
			return {
				tableData: [],
				roleArr: [], //角色
				btnselect: 0,
				rowselect: 1,
				x: 0,
				y: 0,

				classID: '',
				screenSelect: false,
				screenx: 0,
				screeny: 0,
				showScreen: false,
				screenFormData: {
					name: '',
					createAt: "",
					type: '',
					updatestart: '',
					updateend: '',
				},
				screenSelect: false,
				dateSelectIndex: 0,
				multipleArr: [],
				selectArr: [],
				rangeList: [],
				pc_search_nodata: getApp().globalData.baseImageUrl + '/pc_search_nodata.png',
				fileItem: {}, //已上传文件
				selectItem: {},
				selectedIndexs: [], //多选已选
				selectIdArr: [], //多选id
			}
		},
		onLoad() {

		},
		mounted() {
			this.requestRoleData();
			this.requestDicData();
		},
		methods: {
			//列表网络请求
			async requestListData() {
				let _this = this

				var item = _this.roleArr[_this.btnselect];
				var classItem = item.children[_this.rowselect - 1];

				let parmas = {
					'classifyId': classItem.id,
					size: '1000'
				}

				if (this.screenSelect) {
					if (_this.screenFormData.name) {
						this.$set(parmas, 'name', 'lk:' + _this.screenFormData.name)
					}
					if (_this.screenFormData.createAt) {
						this.$set(parmas, 'createAt', 'lk:' + _this.screenFormData.createAt)
					}
					//文件类型
					if (_this.selectArr.length) {
						var dicStr = '';
						for (var i = 0; i < _this.selectArr.length; i++) {
							if (i == 0) {
								dicStr = _this.selectArr[i].value
							} else {
								dicStr += "," + _this.selectArr[i].value
							}
						}
						this.$set(parmas, 'fileTypeDict', 'in:' + dicStr)
					}


					if (_this.screenFormData.updatestart && !_this.screenFormData.updateend) {
						this.$set(parmas, 'createTime', 'ge:' + _this.screenFormData.updatestart)
					}
					if (!_this.screenFormData.updatestart && _this.screenFormData.updateend) {
						this.$set(parmas, 'createTime', 'le:' + _this.screenFormData.updateend)
					}
					if (_this.screenFormData.updatestart && _this.screenFormData.updateend) {
						this.$set(parmas, 'createTime', 'bt:' + _this.screenFormData.updatestart + ',' + _this
							.screenFormData.updateend)
					}
				}
				console.log(parmas)
				const res = await this.$myRequest({
					url: "/admin/template/list",
					method: 'POST',
					data: parmas,
				})
				console.log('返回结果', res)
				if (res.data.code == 200) {

					var arr = [];
					for (var i = 0; i < res.data.data.list.length; i++) {
						var item = res.data.data.list[i];
						item.fileUrl = _this.$imageUrls({
							fileUrl: item.fileUrl
						})

						arr.push(item)
						console.log(item.fileUrl)
					}
					_this.tableData = arr;
					_this.$refs.mytable.clearSelection()
					_this.selectedIndexs = [];
				}
			},
			//分类网络请求
			async requestRoleData() {
				let _this = this
				let parmas = {
					'pid': ''
				}
				console.log(parmas)
				const res = await this.$myRequest({
					url: "/admin/template/classify",
					method: 'POST',
					data: parmas,
				})
				console.log('返回结果', res)
				if (res.data.code == 200) {
					_this.roleArr = res.data.data.list;
					for (var i = 0; i < _this.roleArr.length; i++) {
						await _this.requestRoleChildData(res.data.data.list[i].id, i);
					}
					_this.initShowAction();
					_this.requestListData();
				}
			},

			//二级分类网络请求
			async requestRoleChildData(pid, index) {
				let _this = this;
				let parmas = {
					'pid': pid
				}
				console.log(parmas);
				const res = await this.$myRequest({
					url: "/comm/classify/list",
					method: 'POST',
					data: parmas,
				})
				console.log('返回结果', res)
				if (res.data.code == 200) {
					var item = _this.roleArr[index];
					item.children = res.data.data.list;
					_this.$set(_this.roleArr, index, item);
					console.log(_this.roleArr);

				}
			},
			async updataRequest() {
				this.requestRoleData()
			},
			//文件类型
			async requestDicData() {
				let _this = this
				const res = await this.$myRequest({
					url: "/comm/dict/list/attach_file_type",
					method: 'GET',
				})
				console.log('返回结果', res)
				if (res.data.code == 200) {
					var arr = [];
					for (var i = 0; i < res.data.data.length; i++) {
						var item = res.data.data[i]
						item.label = item.name;
						arr.push(item)
					}
					_this.rangeList = arr;
					console.log(_this.rangeList)
				}
			},





			//下载
			downloadAction(item) {
				uni.downloadFile({
					url: getApp().globalData.baseUrl + "/admin/clash/export",
					header: {
						"Content-Type": "application/x-xls",
						"Authorization": "Basic ZG90Z286ZG90Z28=",
						"token": uni.getStorageSync("accessToken") ? uni.getStorageSync("accessToken") : ''
					},
					success: function(res) {
						wx.hideLoading();
						wx.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
						}).then(save => {
							console.log('保存成功', save)
						}).catch(error => {
							console.log('保存失败', error)
						})
					},
					fail: function(err) {
						wx.hideLoading();
						console.log('下载失败：', err);
					},
				});
			},

			//筛选
			selectAction(e) {
				this.screenx = e.touches[0].clientX
				uni.getSystemInfo({
					success: res => {
						this.screenx = res.windowWidth - 30
					}
				})
				this.screeny = e.touches[0].clientY + 4
				this.showScreen = !this.showScreen
			},
			//文件类型
			multipleChange(item, value) {
				this.selectArr = item;
				this.multipleArr = value;
			},

			//类型选择
			typeChange(e) {
				console.log(e)
			},

			// 日期选择打开picker
			openDatetimePicker(index) {
				this.dateSelectIndex = index;
				this.$refs.myPicker.show();
			},

			// 日期选择关闭picker
			closeDatetimePicker() {
				this.$refs.myPicker.hide();
			},

			//日期选择
			handleSubmit(e) {
				// {year: "2019", month: "07", day: "17", hour: "15", minute: "21"}
				console.log(e);
				var time = `${e.year}-${e.month}-${e.day} `;
				if (this.dateSelectIndex == 0) {
					this.screenFormData.updatestart = time;
				} else if (this.dateSelectIndex == 1) {
					this.screenFormData.updateend = time;
				}
			},
			//筛选重置
			selectReset() {
				this.screenFormData = {
						name: '',
						createAt: "",
						type: '',
						updatestart: '',
						updateend: ''
					},
					this.$refs.selectxy.handleAllRemove();
				this.screenSelect = false;
				this.requestListData();
			},
			//筛选确认	
			selectSureAction() {
				this.screenSelect = true;
				this.showScreen = !this.showScreen;
				this.requestListData()
			},

			dialogClose() {
				console.log('点击关闭')
			},

			//展开、隐藏分类
			clickShowAction(index) {
				var item = this.roleArr[index];
				item.show = !item.show
				this.$set(this.roleArr, index, item)
			},
			
			//首次展开、隐藏分类
			initShowAction() {
				console.log('展开')
				var item = this.roleArr[0];
				item.show = true;
				this.$set(this.roleArr, 0, item)
			},

			clickLestAction(index) {
				this.btnselect = index;
				this.rowselect = 0;
			},
			clickLest1Action(index, ind) {
				this.btnselect = index;
				this.rowselect = ind + 1;
				this.requestListData()
			},

			closeBtnAction() {
				this.$emit('templateListClose')
			},
			moveHandle() {
				return true
			},

		}
	}
</script>

<style scoped>
	.back-view {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 9;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.view-background {
		position: absolute;
		width: 100%;
		height: 100%;
		z-index: 10;
		background-color: rgba(0, 0, 0, 0.3);
	}

	.white-view-back {
		width: 800px;
		height: 491px;
		padding: 24px;
		max-height: 491px;
		background-color: white;
		margin-top: -70px;
		border-radius: 4px;
		z-index: 11;
		position: absolute;
	}

	.top-back {
		display: flex;
		justify-content: space-between;
	}

	.top-name {
		color: #333;
		font-size: 18px;
		font-weight: bold;
	}

	.top-num {
		color: #999;
		font-size: 18px;
		margin-left: 4px;
	}

	.top-contnet {
		font-size: 14px;
		color: #999;
	}

	.top-icon {
		width: 16px;
		height: 16px;
	}

	.top-right {
		cursor: pointer;
		display: flex;
		align-items: center;
		margin-right: 16px;
		margin-left: 16px;
		padding: 5px 10px;
		border-radius: 5px;
	}

	.top-right-left {
		margin-left: auto;
	}

	.uni-container {
		     margin-left: 0px; 
		     margin-right: 0px;
		width: auto;
		height: 390px;
		display: flex;
	}

	.search-back {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.search-noresult {
		font-size: 14px;
		color: #333;
		font-weight: 400;
	}

	.search-image {
		width: 150px;
		height: 150px;
	}

	.item-blue-text {
		cursor: pointer;
		font-size: 14px;
		font-weight: 400;
		color: #2DA9C5;
	}

	.top-exit {
		width: 76px;
		height: 30px;
		background: #E8F7FB;
		border-radius: 2px;
		font-size: 14px;
		font-weight: normal;
		color: #2DA9C5;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.left-back {
		width: 200px;
		min-width: 200px;
		background-color: white;
		height: 100%;
		border-right: 1px #eee solid;
	}
	
	.right-back{
		width: 590px;
		padding: 0px;
	}

	.left-item {
		display: flex;
		font-size: 14px;
		color: #555;
		align-items: center;
		padding: 10px;
		font-weight: 500;
		background-color: white;
	}



	.left-item-select {
		background-color: #E8F7FB;
	}

	.left-item-image {
		width: 16px;
		min-width: 16px;
		height: 16px;
	}

	.left-item-image-trans {
		-webkit-transform: rotateZ(-90deg);
	}

	.left-item-image1 {
		margin-left: 10px;
	}

	.left-item-name {
		margin-left: 5px;
		font-weight: 400;
		max-width: 155px;
		width: 155px;

	}

	.left-item-btn {
		margin-right: 0px;
		margin-left: auto;
		width: 16px;
		min-width: 16px;
		height: 16px;
	}

	.pop-item {
		margin: 10px;
		color: #2DA9C5;
	}

	.left-item-add {
		margin-right: 0px;
		margin-left: auto;
		width: 20px;
		height: 20px;
	}

	.header-img {
		width: 20px;
		height: 20px;
		vertical-align: middle;
		margin-right: 5px;
	}

	.top-right-select {
		background-color: #E8F7FB;
	}

	.top-content-select {
		color: #2DA9C5;
	}

	.screen-back {
		padding: 10px;
		width: 300px;
	}

	.select-bottom {
		display: flex;
	}

	.select-bottom-left {
		cursor: pointer;
		height: 32px;
		width: 120px;
		color: #333;
		background: #FFFFFF;
		border-radius: 2px;
		border: 1px solid #EEEEEE;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 14px;
	}

	.select-bottom-right {
		cursor: pointer;
		height: 32px;
		width: 120px;
		color: #fff;
		background: #8ED8E9;
		border-radius: 2px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 14px;
		margin-right: 0px;
		margin-left: auto;
	}

	.date-select-back {
		width: 130px;
		height: 32px;
		background: #FFFFFF;
		border-radius: 2px;
		border: 1px solid #EEEEEE;
		display: flex;
		align-items: center;
	}

	.dateimage {
		width: 16px;
		height: 16px;
		margin-left: 10px;
		margin-right: 3px;
	}

	.date-select-plac {
		font-size: 12px;
		color: #999999;
	}

	.date-select-time {
		font-size: 12px;
		color: #333333;
	}

	.celltext {
		min-width: 100px;
		max-width: 150px;
		word-break: break-all;
	}

	.close-back {
		cursor: pointer;
		width: 20px;
		height: 20px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.close-img {
		width: 12px;
		height: 12px;
	}

	.top-line {
		height: 1px;
		background: #EEEEEE;
		width: 100%;
		margin-top: 20px;
		margin-bottom: 20px;
	}
</style>
